<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-styles/typography.html">

<link rel="import" href="app-togglable.html">

<dom-module id="app-togglable-list">
    <template>
        <style include="shared-styles">
            .flex-horizontal-with-ratios {
                @apply --layout-horizontal;
                align-content: stretch;
            }

            .flexchild {
                @apply --layout-flex;
            }

            paper-material {
                padding: 8px;
            }

            paper-icon-button {
                transition: transform 180ms ease-in;
            }

            :host([open]) paper-icon-button {
                transform: rotate(-180deg);
            }

            app-togglable:last-of-type ::slotted(paper-item) {
                border-bottom: 0 none !important;
            }
        </style>
        <h3 class="smallcaps">[[title]] <paper-icon-button icon="hardware:keyboard-arrow-down" id="toggleAll" on-tap="_toggle"></paper-icon-button>
        </h3>
        <paper-tooltip for="toggleAll" position="bottom">Toggle All</paper-tooltip>
        <paper-material id="workflows">
            <template is="dom-repeat" items="[[items]]">
                <app-togglable title="[[item.name]]" info="[[item]]"></app-togglable>
            </template>
        </paper-material>
    </template>
    <script>
        (function () {
            'use strict';
            Polymer({
                is: 'app-togglable-list',

                properties: {
                    title: {
                        type: String
                    },
                    items: {
                        type: Array
                    },
                    open: {
                        type: Boolean,
                        value: false,
                        reflectToAttribute: true
                    }
                },
                _toggle: function (e) {
                    this.open = !this.open;
                    var els = this.shadowRoot.querySelectorAll('app-togglable');
                    [].forEach.call(els, function (el, index) {
                        el.open = this.open;
                        if (this.open)
                            el.$.infoarea.show();
                        else
                            el.$.infoarea.hide();
                    }, this);
                }
            });
        })();
    </script>
</dom-module>